<template>
  <div ref="box" style="width:1000px;height:500px;" />
</template>

<script>
import axios from 'axios'
import lineData from '@/views/dashboard/components/line/lineData.js'
import * as Echarts from 'echarts'
export default {
  name: 'VueAdminTemplateMasterLine',

  data() {
    return {
      list: []
    }
  },
  created() {
    this.getpeiData()
  },
  mounted() {
    this.echarts = Echarts.init(this.$refs.box)
    this.echarts.setOption(lineData)
    this.time = setInterval(() => {
      this.getpeiData()
    }, 3000)
  },
  destroyed() {
    clearInterval(this.time)
    this.time = null
  },

  methods: {
    async getpeiData() {
      const { data } = await axios.get('/mock/echarts/line')
      // console.log(data)
      this.list = data.data.title
      // console.log(this.list)
      const arr = []
      const arr1 = []
      this.list.map(item => {
        arr.push(item.count)
        arr1.push(item.title)
      })
      lineData.xAxis.data = arr1
      lineData.series[0].data = arr
      this.echarts.setOption(lineData)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
